<div cdkOverlayOrigin
     #origin="cdkOverlayOrigin"
     [class.apes-dropdown-menu-submenu-title]="apesMenuService.isInDropDown"
     [class.apes-menu-submenu-title]="!apesMenuService.isInDropDown"
     [style.paddingLeft.px]="apesMenuService.mode === 'inline'? (apesPaddingLeft ? apesPaddingLeft : apesSubmenuService.level * apesMenuService.inlineIndent) : null"
     (mouseenter)="setMouseEnterState(true)"
     (mouseleave)="setMouseEnterState(false)"
     (click)="clickSubMenuTitle()">
  <i apes-icon [apesType]="apesIcon" *ngIf="apesIcon"></i>
  <ng-container *apesStringTemplateOutlet="apesTitle"><span>{{ apesTitle }}</span></ng-container>
  <ng-content select="[title]" *ngIf="!apesTitle"></ng-content>
  <span *ngIf="apesMenuService.isInDropDown; else notDropdownTpl" class="apes-dropdown-menu-submenu-arrow">
    <i apes-icon apesType="right" class="anticon-right apes-dropdown-menu-submenu-arrow-icon"></i>
  </span>
  <ng-template #notDropdownTpl>
    <i class="apes-menu-submenu-arrow"></i>
  </ng-template>
</div>
<ul *ngIf="apesMenuService.mode === 'inline'"
    [@collapseMotion]="expandState"
    [apesNoAnimation]="noAnimation?.apesNoAnimation"
    [ngClass]="apesMenuClassName"
    class="apes-menu apes-menu-inline apes-menu-sub">
  <ng-template [ngTemplateOutlet]="subMenuTemplate"></ng-template>
</ul>
<ng-template cdkConnectedOverlay
             (positionChange)="onPositionChange($event)"
             [cdkConnectedOverlayPositions]="overlayPositions"
             [cdkConnectedOverlayOrigin]="origin"
             [cdkConnectedOverlayWidth]="triggerWidth"
             [cdkConnectedOverlayOpen]="apesOpen && apesMenuService.mode !== 'inline'">
  <div class="apes-menu-submenu apes-menu-submenu-popup"
       [@slideMotion]="expandState"
       [@zoomBigMotion]="expandState"
       [apesNoAnimation]="noAnimation?.apesNoAnimation"
       [class.apes-menu-light]="apesMenuService.theme === 'light'"
       [class.apes-menu-dark]="apesMenuService.theme === 'dark'"
       [class.apes-menu-submenu-placement-bottomLeft]="apesSubmenuService.mode === 'horizontal'"
       [class.apes-menu-submenu-placement-rightTop]="apesSubmenuService.mode === 'vertical' && placement === 'rightTop'"
       [class.apes-menu-submenu-placement-leftTop]="apesSubmenuService.mode === 'vertical' && placement === 'leftTop'"
       (mouseleave)="setMouseEnterState(false)"
       (mouseenter)="setMouseEnterState(true)">
    <ul [class.apes-dropdown-menu]="apesMenuService.isInDropDown"
        [class.apes-menu]="!apesMenuService.isInDropDown"
        [class.apes-dropdown-menu-vertical]="apesMenuService.isInDropDown"
        [class.apes-menu-vertical]="!apesMenuService.isInDropDown"
        [class.apes-dropdown-menu-sub]="apesMenuService.isInDropDown"
        [class.apes-menu-sub]="!apesMenuService.isInDropDown"
        [ngClass]="apesMenuClassName">
      <ng-template [ngTemplateOutlet]="subMenuTemplate"></ng-template>
    </ul>
  </div>
</ng-template>

<ng-template #subMenuTemplate>
  <ng-content></ng-content>
</ng-template>
